<template>
	<view class="contact-item" :class="{'tools-view-group__item_np ':contactType == 2,'st-contact-container':contactType == 1,'st-food-contact-container':contactType==3}"
	 v-show="true">
		<!-- #ifndef MP-TOUTIAO -->
		<block v-if="contactType == 2">
			<view class="center" @click="onTapContact">
				<text class="icon"></text>
				<text class="name">联系我们</text>
			</view>
		</block>

		<block v-if="contactType == 1">
			<view  @click="onTapContact" class="st-contact-block">
				<view class="iconfont">&#xe645;</view>
				<view class="st-contact-block__txt">客服</view>
			</view>
		</block>
		
		<!-- 美食详情页客服图标 -->
		<block v-if="contactType == 3">
			<view  @click="onTapContact" class="st-food-contact-block">
				<view class="food-mobile"><text class="icon"></text>客服</view>
			</view>
		</block>
		<!-- #endif -->
	
		<uni-popup ref="popup" type="bottom">
			<view class="contact-wrapper" :class="{'contact-wrapper-bottom': contactType == 2}">
				<view class="contact-group">
					<block v-for="(item, index) in linkTel" :key="index">
						<view class="contact-group__item" @click="onTapCall(item)">{{item}}</view>
					</block>
					<!-- #ifdef H5 -->
					<view class="contact-group__item" v-if="wechaCorpurl" @click="wechatCall">微信客服</view>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="contact-group__item" v-if="wechaCorpurl && wechaCorpId" @click="wechatCall">微信客服</view>
					<button class="contact-group__btn" type="default" open-type="contact">咨询客服</button>
					<!-- #endif -->
					<!-- #ifdef MP-TOUTIAO -->
					<button v-if="openCustomerService == 1" class="contact-group__btn" type="default" open-type="contact">咨询客服</button>
					<!-- #endif -->
				</view>
			</view>
		</uni-popup>
		
		<!-- #ifdef MP-TOUTIAO -->
		<view v-if="touTiaoConfig.cfg_toutiao_open_customer_service == 1" class="st-contact-block">
			
			<block v-if="contactType == 3">
				<view class="st-food-contact-block">
					<button
					  class="toutiao-btn"
					   open-type="im"
					   :data-im-id="touTiaoConfig.cfg_toutiao_customer_id"
					   bindim="imCallback"
					   binderror="onimError"
					>
					</button>
					<view class="food-mobile"><text class="icon"></text>客服</view>
				</view>
			</block>
			<block v-else>
				<button
				  class="toutiao-btn"
				   open-type="im"
				   :data-im-id="touTiaoConfig.cfg_toutiao_customer_id"
				   bindim="imCallback"
				   binderror="onimError"
				>
				</button>
				<view class="iconfont">&#xe645;</view>
				<view class="st-contact-block__txt">客服</view>
			</block>
		</view>
		<view v-else class="st-contact-block" @click="onTapContact">
			 <block v-if="contactType == 2">
				<text class="iconfont">&#xe6e1;</text>
				<text class="name">联系我们</text>
			 </block>
		 
			 <block v-if="contactType == 1">
				<view class="iconfont">&#xe645;</view>
				<view class="st-contact-block__txt">客服</view>
			 </block>
			 
			 <!-- 美食详情页客服图标 -->
			 <block v-if="contactType == 3">
			 	<view class="st-food-contact-block">
			 		<view class="food-mobile"><text class="icon"></text>电话</view>
			 	</view>
			 </block>
			 
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import uniPopup from "./uni-popup/uni-popup.vue"
	export default {
		name: "stcontact",
		components: {
			uniPopup
		},
		props: {
			contactType: {
				type: Number,
				default: 1
			},
			telephone: {
				type: Array,
				default () {
					return []
				}
			},
		},
		data() {
			return {
				linkTel: [],
				wechaCorpId:'',
				wechaCorpurl:'',
				openCustomerService:'',
				touTiaoConfig:{}
			};
		},
		created() {
			// #ifdef MP-TOUTIAO
			// 抖音客服
			this.getTouTiaoConfig();
			//#endif
		},
		methods: {
			
			// #ifdef MP-TOUTIAO
			// 抖音客服
			async getTouTiaoConfig(){
				let params = {
					method: "api/v2/toutiao/config/index"
				}
				let res = await this.$http(params);
				if(res.status){
					this.touTiaoConfig = res.data;
				}else{
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				}
			},
						
			imCallback(e) {
			    console.log("跳转IM客服成功", e.detail);
			  },
			  onimError(e) {
			    console.log("拉起IM客服失败", e.detail);
			  },
			//#endif
			
			// 选择客服
			onTapContact(e) {
				uni.navigateTo({
					url:"/pages/ucenter/lianxi"
				})
				return
				let mobile = uni.getStorageSync('cfg_m_phone');
				this.wechaCorpurl = uni.getStorageSync('cfg_m_wap_link');
				this.wechaCorpId = uni.getStorageSync('cfg_m_wap_en_id');
				this.openCustomerService = uni.getStorageSync('cfg_toutiao_open_customer_service');
				this.linkTel = mobile.split(',');
				
				if(this.telephone.length>0){
					this.linkTel=this.telephone
				}
				this.$refs.popup.open();
			},
			// 拨打电话
			onTapCall(item) {
				uni.makePhoneCall({
					phoneNumber: item,
					complete: () => {
						this.$refs.popup.close();
					}
				});
			},
			wechatCall(){
				
				// #ifdef MP-WEIXIN
				wx.openCustomerServiceChat({
				  extInfo: {
					url: this.wechaCorpurl,
				  },
				  corpId: this.wechaCorpId,
				  success(res) {
					
				  }
				});
				// #endif
				
				// #ifdef H5
				window.location.href = this.wechaCorpurl
				// #endif
			},
		}
	}
</script>

<style lang="scss" scoped>
	.contact-item{
		/*width: 100% !important;*/
		padding: 0 !important;
		.center{
			.icon{
				display: block;
				width: 92rpx;
				height: 92rpx;
				margin: 0 auto;
				background: url(https://static.member.stourweb.cn/uniapp/static/images/uni-cms-tool-icon09.png) no-repeat;
				background-size: contain;
			}
			.name{
				color: #333;
				display: block;
				font-size: $uni-font-size-sm;
				margin-top: 0;
			}
		}
	}
	.st-contact-container {
		height: 100%;
		text-align: center;
	}
	.st-contact-block {
		@extend .directionColumnJustify;
		width: 96rpx;
		height: 100%;
		color: #333;
		position: relative;
		.iconfont {
			font-size: 40rpx;
			height: 38rpx;
			vertical-align: top;
			display: inline-block;
			line-height: 38rpx;
		}
		&__txt{
			font-size: 20rpx;
			height: 38rpx;
			display: inline-block;
			line-height: 46rpx;
		}
	}
	.st-food-contact-container{
		height: 100%;
		text-align: center;
		width: 120rpx;
		height: auto!important;
		background: #fe9900;
		border-radius: 50rpx;
		.st-contact-block {
			@extend .directionColumnJustify;
		}
	}
	.st-food-contact-block{
		@extend .alignJustify;
		color: #fff;
	}
	.food-mobile{
		width: 120rpx;
		padding: 10rpx 0;
		font-size: 24rpx;
		color: #fff;
		text-align: center;
		border-radius: 30rpx;
		.icon{
			display: inline-block;
			width: 19rpx;
			height: 24rpx;
			background: url("https://static.member.stourweb.cn/uniapp/static/images/hotel-phone-icon.png") no-repeat;
			background-size: contain;
			vertical-align: middle;
			margin: -3rpx 9rpx 0 0;
		}
	}

	/* #ifdef MP-WEIXIN */
	.tools-view-group__item {
		width: 100%;
		padding: 0 !important;
	}
	.tools-view-group__item_np{
		padding-top: 0;
		width: 100%;
	}
	/* #endif */
	
	.tools-view-group__item .iconfont {
		color: #89909b;
		font-size: 40rpx;
	}

	.tools-view-group__item .name {
		color: #555;
		display: block;
		margin-top: 2px;
		font-size: 12px;
	}

	.contact-wrapper {
		border-radius: 24rpx 24rpx 0 0;
		background-color: $uni-bg-color
	}

	.contact-group {
		&__item {
			padding: 28rpx 0;
			position: relative;
			font-size: $uni-font-size-lg;
			font-family: Arial, Helvetica, sans-serif;

			&:after {
				@include line
			}
		}
		&__btn {
			padding: 6rpx 0;
			font-size: $uni-font-size-lg !important;
			background-color: $uni-bg-color !important;
		}
	}
	.toutiao-btn{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		opacity: 0;
	}
</style>
